<template>
  <div class="loginPage">
    <div class="left">
      <img
        class="leftPictrue"
        src="../assets/login-page.jpg"
        alt="ST Parking System"
      />
    </div>
    <div class="right">
      <div class="changePswTitle">Change Password</div>
      <img
        class="green-logo"
        src="../assets/green-logo.png"
        alt="ST Parking System"
      />

      <div class="bottomBox">
        <div class="every-line">
          Current Password:<el-input
            v-model="currentPsw"
            placeholder="Current Password"
            class="inputBox"
          ></el-input>
        </div>

        <div class="every-line">
            New Password: <el-input
            v-model="newPsw"
            placeholder="New Password"
            class="inputBox"
          ></el-input>
        </div>

        <div class="every-line">
          Confirm New Password:<el-input
            v-model="newPsw2"
            placeholder="Confirm New Password"
            class="inputBox"
            show-password
          ></el-input>
        </div>

        <el-button class="loginBtnS" @click="loginHandle()">Submit</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex"; // 引入useStore 方法
export default {
  setup() {
    const { proxy } = getCurrentInstance();
    const rq = proxy.$instance;
    const router = useRouter();
    const store = useStore();

    onMounted(() => {
      console.log("====================================");
      console.log(store);
      console.log("====================================");
    });

    function loginHandle() {
      rq.post("/api/authenticate", {
        username: state.inputAccount,
        password: state.inputPsw,
      }).then((res) => {
        localStorage.setItem("token", `Bearer ${res.data.id_token}`);
        // 请求account
        if (res.data.id_token) {
          rq.get("/api/account", {}).then((res) => {
            console.log(res);
            localStorage.setItem("loginRole", res.data.authorities[0]);
          });
          router.push("home");
          // 存token
          // rq.$store.dispatch("changeAsync", res.headers.authorization);
        }
      });
    }

    const state = reactive({
    
      currentPsw: "",
      newPsw: "",
      newPsw2:""
    });

    return {
      ...toRefs(state),
      loginHandle,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/publicAndBaseCss/public.scss";

.loginPage {
  display: flex;

  .left {
    width: 80%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .leftPictrue {
      width: 50%;
    }
  }

  .right {
    width: 50%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 5%;
    .changePswTitle {
      color: $main-color;
      font-size: 3rem;
    }
    .green-logo {
      width: 50%;
    }

    .grid-content {
      background-color: $main-color;
    }

    .bottomBox {
      height: 20vh;
      display: flex !important;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center !important;
      .every-line{
       
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }

    .inputBox {
      width: 15vw;
     
      color: $main-whitecolor;
    }
    .loginBtnS {
        width:25vw;
        background-color: $main-color;
        color: $main-whitecolor;
      }
  }
}
</style>
